<template>
    <div class="heroslist">
        <ul>
            <li v-for="item in herolist" :key="item.id">
                <router-link :to="`/herocon/${item.id}/${item.name}`">
                    <img :src="`http://cdn.xiaohigh.com${item.image}`" alt="">
                    <h3>{{ item.name }}</h3>
                </router-link>

                <!-- <router-link :to="{
                    name:'herocon',
                    params:{
                        id:item.id
                    }
                }">
                    <img :src="`http://cdn.xiaohigh.com${item.image}`" alt="">
                    <h3>{{ item.name }}</h3>
                </router-link> -->

                
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "HeroList",
        data(){
            return{
                herolist:[]
            }
        },
        props:{
            keyword:{
                type: String,
                require:true              
            },
            value:String
        },
        async mounted(){
            let {data} = await this.$axios.get("http://api.xiaohigh.com/heros")
            this.herolist = data
        },
        watch:{
            async keyword(){
                let {data} = await this.$axios.get("http://api.xiaohigh.com/heros",{
                    params:{
                        name_like:this.keyword
                    }
                })
                this.herolist = data
            }
        }
    }
</script>

<style scoped>
.heroslist h1{
    text-align: center;
    color: goldenrod;
}
.heroslist ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    list-style: none;
}

.heroslist ul li{
    margin: 20px;
    text-align: center;
}

.heroslist ul li img{
    width: 100px;
    height: 100px;
    border-radius: 50%;
}
</style>